<template>
  <el-dialog
    title="新增设备"
    width="40%"
    :visible="addvisible"
    @open="getPageInfo"
    @close="close"
  >
    <el-form :model="form" ref="deviceform" :rules="rules">
      <el-form-item label="设备编号" label-width="120px">
        系统自动生成
      </el-form-item>
      <el-form-item label="选择型号" label-width="120px" prop="vmType">
        <el-select
          v-model="form.vmType"
          style="width: 80%"
          placeholder="请选择"
        >
          <el-option
            v-for="item in DeviceInfoList"
            :key="item.typeId"
            :label="item.name"
            :value="item.typeId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择点位" label-width="120px" prop="nodeId">
        <el-select
          v-model="form.nodeId"
          style="width: 80%"
          placeholder="请选择"
        >
          <el-option
            v-for="item in NodeInfoList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getDeviceInfo, getNodeInfo, addNode } from '@/api/device-manager'
export default {
  name: 'AddDevice',
  props: {
    addvisible: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      form: {
        vmType: '',
        nodeId: '',
        createUserId: 1
      },
      pageinfo: {
        pageIndex: 1,
        pageSize: 1000
      },
      rules: {
        vmType: [{ required: true, message: '请选择', trigger: 'blur' }],
        nodeId: [{ required: true, message: '请选择', trigger: 'blur' }]
      },
      dialogFormVisible: true,
      DeviceInfoList: [], // 型号
      NodeInfoList: [] // 点位
    }
  },
  methods: {
    // 关闭
    close () {
      this.$refs.deviceform.resetFields()
      this.$emit('update:addvisible', false)
    },
    // 打开时请求数据
    async getPageInfo () {
      const data = await getDeviceInfo(this.pageinfo)
      const res = await getNodeInfo(this.pageinfo)
      this.DeviceInfoList = data.currentPageRecords
      this.NodeInfoList = res.currentPageRecords
    },
    // 新增
    submit () {
      this.$refs.deviceform.validate(async value => {
        if (value) {
          await addNode(this.form)
          this.$emit('updataList')
          this.$message({ type: 'success', message: '添加成功' })
          this.close()
        }
      })
    }
  }
}
</script>

<style lang="scss">
   .el-dialog {
    border-radius: 10px;
    .el-dialog__title{
      font-size: 16px;
      font-weight: 700;
    }
    .el-dialog__body{
      padding: 10px 20px 30px;
    }
    .dialog-footer {
      text-align: center;
      .el-button--primary {
        background: linear-gradient(135deg, #ff9743, #ff5e20);
        border: none;
      }
      .el-button--default {
        background-color: #fbf4f0;
        border: none;
        color: #655b56;
        margin-right: 20px;
      }
    }
  }
</style>
